<template>
  <div class="personal_">
    <div class="p_top">
      <img :src="loginAdmin.headPic" style="border-radius: 45px" alt="#" @click="go_1" />
      <p @click="go_1">
        <span>用户名:{{ loginAdmin.name }}</span>
        <span>手机号:{{ loginAdmin.phoneNum }}</span>
      </p>
      <span><i class="fa fa-angle-right"></i></span>
    </div>
    <ul class="p_list">
      <li @click="go_2">
        <img src="../../assets/images/钱包.png" alt="" />
        <span>我的钱包</span>
      </li>
      <li @click="go_3">
        <img src="../../assets/images/订单.png" alt="" />
        <span>我的订单</span>
      </li>
      <li @click="go_6">
        <img src="../../assets/images/用户反馈.png" alt="" />
        <span>用户反馈</span>
      </li>
      <li @click="go_4">
        <img src="../../assets/images/帮助中心.png" alt="" />
        <span>帮助中心</span>
      </li>
      <li @click="go_5">
        <img src="../../assets/images/设置.png" alt="" />
        <span>设置</span>
      </li>
      <li @click="go_7">
        <img src="../../assets/images/版本检测.png" alt="" />
        <span>版本检测</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {user} from '../../request/userinfo/userinfo'
export default {
  props: {},
  data() {
    return {
      loginAdmin:{},

    };
  },
  mounted(){
    user({
      "token":window.localStorage.getItem("token")
    }).then((res)=>{
      // console.log(res)
      this.$store.state.user = res.data
    })

  },
  created() {
    this.initUserInfo();
  },
  methods: {
    initUserInfo(){
      this.$http.get("http://192.168.1.49:9999/client/api/info").then(result=>{
        console.log(result)
        if(result.data.code === 200){
          this.loginAdmin = result.data.data;
        }
      })
    },
    go_1() {
      this.$router.push("/my_msg");
    },
    go_2() {
      this.$router.push("/wallet");
    },
    go_3() {
      this.$router.push("/wodedingdan");
    },
    go_4() {
      this.$router.push("/kefuzhongxin");
    },
    go_5() {
      this.$router.push("/shezhi");
    },
    go_6() {
      this.$router.push("/fankui");
    },
    go_7() {
      this.$router.push("/banbengengxin");
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.personal_ {
  position: fixed;
  z-index: 8888;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  width: 5rem;
  .p_top {
    display: flex;
    align-items: center;
    height: 2.66rem;
    color: #fff;
    background-color: #43a7ff;
    img {
      margin: 0 0.28rem 0 0.24rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    p {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.3rem;
      span:last-of-type {
        margin-top: 0.1rem;
        font-size: 0.2rem;
      }
    }
    & > span {
      margin-right: 0.3rem;
      font-size: 0.5rem;
    }
  }
  .p_list {
    padding-top: 0.52rem;
    background-color: #fff;
    li {
      display: flex;
      align-items: center;
      height: 1rem;
      img:nth-of-type(1) {
        margin: 0 0.36rem 0 0.24rem;
        width: 0.44rem;
        height: 0.38rem;
      }
      img:nth-of-type(2) {
        margin: 0 0.42rem 0 0.24rem;
        width: 0.38rem;
        height: 0.45em;
      }
      img:nth-of-type(3) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      img:nth-of-type(4) {
        margin: 0 0.38rem 0 0.24rem;
        width: 0.42rem;
        height: 0.42rem;
      }
      img:nth-of-type(5) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      img:nth-of-type(6) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      span {
        flex: 1;
      }
    }
  }
}
</style>
